<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{lib/layui-v2.6.3/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all">
    <style>
        .imgText{
            position: relative;
            left: -180px;
            top: 20px;
        }
        ul{
            list-style-type: none;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">植物ID</label>
                            <div class="layui-input-inline">
                                <input type="text" name="plantId" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <ul>
            <li class="col-xs-6 col-md-2" th:each="item:${plist}" style="padding: 5px">
                <img  class="layui-nav-item" th:lay-src="${item.plantPicture}" alt="" style="height:230px; width: 280px" >
                <span class="imgText" th:text="${item.plantId}"></span>
            </li>
        </ul>

    </div>
</div>
<script th:src="@{/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
<script th:inline="none">
    layui.use(['form','flow'], function () {
        var $ = layui.jquery,
            form = layui.form,
            flow = layui.flow;

        //当你执行这样一个方法时，即对页面中的全部带有 lay-src 的 img 元素开启了懒加载（当然你也可以指定相关 img）
        flow.lazyimg();


        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            var key = data.field.plantId;
            location.href = "/admin/picture?search="+key;
            return false;
        });
    });
</script>

</body>
</html>